<template name="goodItem">
	<view class="goodItem" data-url="goodDetail" @tap="toGoodDetail" :data-id="goodInfo.id">
		<view class="imgBox"><image mode="widthFix" :src="goodInfo.img" lazy-load="true"></image></view>
		<view class="infoBox">
			<text class="goodTitle">{{ goodInfo.name }}</text>
			<!-- <view class="tagBox" v-if="goodInfo.labels.length>0">
				<text v-for="(itm,idx) in goodInfo.labels" :key="idx">{{itm}}</text>
			</view> -->
			<view class="priceBox">
				<text class="priceNow">￥{{ goodInfo.price }}</text>
				<!-- <text class="priceOld">￥{{goodInfo.price.toFixed(2)}}</text> -->
				<text class="sellCount">{{ soldCount }}</text>
			</view>
			<!-- <text class="discount" v-if="goodInfo.discount">{{goodInfo.discount}}</text> -->
			<view class="shopBox">
				<text class="shopName">{{ goodInfo.store.name }}</text>
				<text class="distance">{{ dis }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
import COMM from '@/common/common.js';
export default {
	computed: {
		...mapState({
			locationCity: state => state.map.locationCity,
			roads: state => state.map.roads
		})
	},
	name: 'goodItem', //组件名称
	// 传递参数
	props: {
		goodInfo: {
			type: Object,
			default: null
		}
	},
	// 组件参数
	data() {
		return {
			dis: '0米',
			soldCount: 0,
			showXieyi: false
		};
	},
	// 组件方法
	methods: {
		getYuyue() {
			let cnt = parseInt(this.goodInfo.sold);
			if (cnt < 10000) {
				this.soldCount = cnt + '人预约';
			} else {
				this.soldCount = parseFloat(cnt / 10000).toFixed(1) + '万人预约';
			}
			// console.log(this.goodInfo)
			let lat1 = this.goodInfo.store.lati;
			let lng1 = this.goodInfo.store.longi;
			let lat2 = this.roads.latitude;
			let lng2 = this.roads.longitude;
			this.dis = COMM.getDis(lat1, lng1, lat2, lng2);
		},
		toGoodDetail(e) {
			let _id = e.currentTarget.dataset.id;
			let _goodInfo = this.goodInfo;
			_goodInfo.bannerList = [
				{
					location: 1,
					url: this.goodInfo.img
				}
			];
			_goodInfo.running = 1;
			_goodInfo.isDelete = 0;
			_goodInfo.stock = 2;
			uni.setStorage({
				key: 'toGood',
				value: _goodInfo,
				success: () => {
					this.toPage({
						url: 'goodDetail',
						id: _id
					});
				}
			});
		}
	},
	created() {
		setTimeout(() => {
			this.getYuyue();
		}, 200);
	}
};
</script>

<style lang="less" scoped>
.goodItem {
	width: 100%;
	background-color: #fdfdff;
	box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(201, 202, 208, 0.35);
	border-radius: 14rpx;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	overflow: hidden;
	margin-bottom: 20rpx;

	.imgBox {
		border-radius: 14rpx;
		display: flex;
		justify-content: stretch;
		overflow: hidden;

		image {
			width: 100%;
		}
	}

	.infoBox {
		width: 100%;
		padding: 10rpx;
		display: flex;
		flex-direction: column;

		.goodTitle {
			width: 100%;
			font-size: 28rpx;
			color: #202932;
			margin-bottom: 10upx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
	}

	.tagBox {
		display: flex;
		flex-wrap: wrap;
	}

	.discount {
		font-size: 18rpx;
		color: #ff4738;
	}

	.priceBox {
		display: flex;
		align-items: baseline;
	}

	.priceNow {
		font-size: 33rpx;
		font-weight: bold;
		color: #ff3b2b;
	}

	.priceOld {
		font-size: 18rpx;
		text-decoration: line-through;
		color: #959ca6;
	}

	.sellCount {
		font-size: 18rpx;
		color: #959ca6;
		flex: 1;
		text-align: right;
	}

	.tagBox {
		display: flex;

		text {
			height: 26upx;
			background-color: #e5bc7a;
			border-radius: 13rpx;
			padding: 0 8rpx;
			font-size: 20rpx;
			line-height: 26upx;
			color: #ffffff;
			margin-right: 8rpx;
			margin-bottom: 2px;
		}
	}
	.xieyiShow {
		font-size: 24upx;
		color: #ffffff;
		background-color: #ffcd11;
		border-radius: 6upx;
		align-self: flex-start;
		padding: 2upx 10upx;
	}
	.shopBox {
		display: flex;

		.shopName {
			font-size: 18rpx;
			color: #959ca6;
			padding-right: 16rpx;
			flex-grow: 1;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.distance {
			font-size: 18rpx;
			color: #959ca6;
			flex-shrink: 0;
		}
	}
}
</style>
